<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <title>Wecode Decoder H5 SDK Demo</title>
    <style>
      body {
        margin: 0;
      }

      #my-decoder {
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <!-- Decoder实例挂载节点 -->
    <!-- <img src="../static/img/404.a57b6f31.png" alt="">-->
    
    <div id="my-decoder"></div>
  </body>
  <!-- script标签接入SDK -->
  <script src="../static/js/wecode/wecode-decoder-h5.js"></script>

  <!-- ES module引入模块 -->
  <!-- <script type="module">
	import { Decoder } from './wecode-decoder-h5.esm.js';
</script> -->

  <!-- commonjs引入模块 -->
  <!-- <script>
	const Wecode = require('./wecode-decoder-h5.js');
</script> -->

  <script>
    // 实例化Decoder
    const decoder = new Wecode.Decoder({
      appId: 'WD639724',
      appKey: 'V0Q2Mzk3MjQjTUlJQ2R3SUJBREFOQmdrcWhraUc5dzBCQVFFRkFBU0NBbUV3Z2dKZEFnRUFBb0dCQUpHV1B1a1pwR2ZpOVNIOUlSbHNmOWhGbnQ3MTBUQnFYUy9ubFpNVWszMEhkcVVvU3BCemtPbkZmU1d0WnMydjZBa2h0Q1pvZmFiWDRlVUJjREM4RytKM3VuODN1eXNsV3k1YjVUQXlzTCswUFBPVngyOEJNMEdsWXhuZklLcUFwWVI3T3lWWkJEWmJ2c3NiRXNMUHpUU0hiK3g0dGpvVWxCQ3YwL0J0NWk5aEFnTUJBQUVDZ1lBbTJ2V1JXdEdoRkZhZUtxT3gyRjVLaDFJK2FWYmFXQmprMXliNWFTMXYyaFVWUVNxZFlPcVZLYXNiNmlxY3pNemQyd3Zza0Vpd3hiODVVbWZ4NmRKNitHTVJ5ZFJBVC9wQTJjcHlwcmN5TkNqUEpVdUhKdTFxWnJ3UDhIaVZtRU95bVFOUlNXc1VEcE9DL2lEd2RCMFJwYXlYaElkaXFYYUQ3TGZLT0ZYNmZRSkJBTkNtby9Nd1Rsa2VRb0NkeWlYZ2QrOElYRjJPbEs2WXBiTCt6VjkwVHZFcit3ZWtHNzhzLzJpdVN2b1RRd0twOGlUZzhCOFBQRjlLVzgrSTRlY0RwMU1DUVFDeW4vY2ZLVWdUdWg3NjFIZ3lTTVFSeThNekZ1ODNZeHF4ZVZJdk1rTXFEcFFOWXltc0tPUktNeEFKU2Q4UklTQStJL0w3T0x3Sng0NkM4c1hRR3p2N0FrRUFwZ3BHWkF1bi9hRm4rS1FZcndXdlM0Z1N3TnpyRXZva3VvbXNjMjdDTjRmeFQ0WllFazNEdnRFY2wxOW1yeU1Bc0RwVXU5TExEMlhFSkNaZzV3N3dRd0pCQUlObGVyS1llbVhRaHRONmtnUmpWSi9HcFF1aTlrdG5BbzdFc1BqNDMwRkR3aExxL0EraGNQVklCS2JnaVUrZmI0bG1obW5ZdlRId2N0dk8zRWFPa2hzQ1FEWXpFWlY0Wjg1RXJqSlJlUDFMRWk3V2hpb3U3dmtpRGJkc1ZXazVvSHBYY1RWbHA2TWxlb2JwWk5jMitaYmdVZ210TnU2R2xEUlRaeVdTYkV4V1FNVT0jMCMwI2R1bEhodFlzVEdYNlFDTzRPbndCaDdkdURaUzhYOHZaWDJiT2FoWjVxaXoyV3A0ZDZ2OWdOeFRoVnhCL3VqQ3psRjJ3MHRNZkxuclcvdU5wZTk1UHFyZFJXMnkrZm9YR3d2UE9nRCtMeUYzc0sySCt4NXhDNjNhczIwUFMvMFZRQ1lld05qUnZtLzJHNlZiV0FWaEFPZDNHSjJLb015ZFIwZG8zNU83S2xEVT0jTUlHZk1BMEdDU3FHU0liM0RRRUJBUVVBQTRHTkFEQ0JpUUtCZ1FDYkdtQVdDbFAySTBhc1NFWHF1dE9yeExQMk9VelltTGZ1aEFJVTJDU2txZ1VhTHZBWTVaOHF4SlhCV1UrSmFaY0NiRmhCLzBGajdjVEpLK1JKRmRDdjNjRkYveWkrUzQ3VlhxQ3MyemkyTG1kV25kMHlqajlJVUUyK0hmRlhwekFtUDU1QnNhYUFHOFFqaFB2Vm9WcHFtcWx4dnNWZndJZjFyMmh5bnRyaDh3SURBUUFC',
      mount: '#my-decoder',
      showLoading: true,
    });
    decoder.onSuccess = ({ code, tenantCode, raw }) => {
      // 解码成功后，暂停解码，防止频繁响应解码成功事件
      decoder.pause();
      // 处理解码后的码值
      console.log('decode success:', tenantCode, code);
      // 仅“自由编码”码值raw字段有意义，其余模式可忽略该字段
      if (raw.length > 0) {
        console.log('decode success (raw):', raw);
      }
      // ...
      // 调用start()继续扫码
      decoder.start();
    };
    // 响应解码失败事件
    decoder.onError = (error) => {
      switch (error.name) {
        case 'PlatformError':
          alert('兼容性错误：' + error.message);
          break;
        case 'DecoderError':
          if (error.message === '摄像机使用权限被拒绝') {
            alert('请重新加载页面并允许摄像机权限');
            return;
          }
          alert('解码错误：' + error.message);
          break;
        case 'CompatibilityError':
          alert('兼容性错误：' + error.message);
          break;
        case 'AuthError':
          alert('授权错误：' + error.message);
          break;
        default:
          console.log('decoder error:', error);
          break;
      }
    };
    // 启动解码
    decoder.start().then(() => {
      // 启动解码后业务逻辑
    });
  </script>
</html>
